<template>
  <div>
    <NavigationBar></NavigationBar>
    <div class="cart_container">
      <div v-for="(item,index) in cartList" :key="index">
      <input type="checkbox" v-model="sel" :value="item" @change="ckSels(item)" />
        <van-card
        :num="item.num"
        :price="item.item.minPrice"
        :desc="item.item.characteristic"
        :title="item.item.name"
        :thumb="item.item.pic"
      >
        <template #footer>
        <van-stepper v-model="item.num" @plus="add(item)" @minus="sub(item)" />
        </template>
      </van-card>
      </div>
    </div>
      <van-submit-bar class="sub_container" :price="total" @submit="subCart" button-text="提交订单" >
        全选：<input type="checkbox" value="ckAll" v-model="ckAll" @click="checkAll($event)">
        <template #tip>
          你的收货地址不支持同城送, <span >修改地址</span>
        </template>
      </van-submit-bar>
  </div>
</template>

<script>
import mixin from "../store/store";
import NavigationBar from "../components/headerNav/NavigationBar";
export default {
  mixins:[mixin],
  components:{
    NavigationBar
  },
  data(){
    return {
      ckAll:[],
      sel:[],
      total:0
    }
  },
  watch:{
    sel:{
      handler(array){
        this.total = 0;
        array.map(el=>{
          this.total+=el.item.minPrice*el.num*100
        })
        if(array.length === [...this.$store.state.cartList].length){
          this.ckAll.push("ckAll");
        }else{
          this.ckAll = []
        }
      },
      deep:true
    }
  },
  methods:{
    add(item){
      this.plusCount({id:item.item.id});
    },
    sub(item){
      this.reduceCount({id:item.item.id});
    },
    checkAll(e){
      if(e.target.checked){
        this.sel = [...this.$store.state.cartList];
      }else{
        this.sel = [];
      }
    },
    subCart(){
      this.subCarts();
      this.$router.goNext("/placeOrder")
    },
    ckSels(item){
      this.ckSel(item)
    }
  }
}
</script>

<style scoped>
.cart_container
{
  margin-top: 64px;
  margin-bottom: 150px;
}

.sub_container
{
  position: fixed;
  bottom: 64px;
}
</style>>
